<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        }

        div img {
            width: 240px;
            height: 300px;
            margin-left: 30px;
            margin-top: 20px;
        }

        .wrap {
            margin-left: 60px;
            color: slategray;
        }

        div>b {
            margin-left: 110px;
            font-size: 20px;
        }

        #price {
            font-size: 20px;
        }

        div>p input {
            width: 50px;
        }

        div p {
            margin-left: 70px;
            color: silver;
        }

        div>p #btn1 {
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div>
        <img src="img/2.jpg" alt="">
        <span class="wrap">纪梵希 小羊皮口红304</span> <br>
        <b>¥</b> <span id="price">340</span>
        <p><b>数量</b><button id="btn1">-</button><input type="text" id="num" value="0" min="0"><button
                id="btn2">+</button></p>
        <p>总价￥：<span id="total"></span></p>
    </div>
    <script>

        // var price = document.getElementById('price')
        // var num = document.getElementById('num')
        // var total = document.getElementById('total')

        btn2.onclick = function () {
            num.value = parseInt(num.value) + 1
            sumPrice()
        }
        btn1.onclick = function () {
                num.value = parseInt(num.value) - 1
            if(num.value<0){
                num.value=0
            }else if(num.value>=0){
                sumPrice()
            }  
        }

        function sumPrice() {
            total.innerHTML = Number(price.innerText) * Number(num.value)
        }

    </script>
</body>

</html>